<!DOCTYPE html>
<html>
<head>
	<title>实名认证 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script src="layer/layer.js"></script>
	<style type="text/css">
		.content{
			overflow: hidden;
		}
		.userCheckCont{
			width: 100%;
		}
		.userInfoCont{
			overflow: hidden;
			padding: 40px 0px 20px;
			background-image: linear-gradient(to top,#1bb7c3,#f4f4f4);
			box-shadow: 0px 3px 3px #c1c1c1;
		}
		.userInfoCont  .userInfoIcon{
			width: 18%;
			margin: 0px auto 10px;
		}
		.userInfoCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}

		.solidCont{
			width: 200%;
			overflow: hidden;
		}
		.checkState{
			width: 50%;
			margin:30px 0px;
			float: left;
		}
		.checkState .stateIcon{
			width: 30px;
			margin: 0 auto;
		}
		.checkState .checkStateTxt{
			text-align: center;
			font-size: 14px;
			padding: 5px 0px;
			color: #333333;
			font-weight: bold;
			margin-bottom: 50px;
		}
		.checkState .checkBtn{
			width: 80%;
			line-height: 40px;
			margin: 5px auto;
			font-weight: bold;
			text-align: center;
			color: #20d6da;
			border: 2px solid #20d6da;
			border-radius: 20px;
		}
		.checkState .checkprompt{
			font-size: 14px;
			text-align: center;
			color: #888888;
			margin: 8px 0px 0px;
		}

		.infoCheckEditCont{
			width: 50%;
			float: left;
			padding-top: 20px;
			overflow:auto;
		}

		.submitBtn,.backBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			color: #20d6da;
			border: 2px solid #20d6da;
			font-weight: bolder;
		}

		#oldPhone{
			display: none;
		}

		/* userIdImg css */
		.userIdImgUpload{
			width: 90%;
			margin: 0 auto 20px;
			overflow: hidden;
		}
		.userIdImgUpload .userIdImgCont{
			width: 100%;
			overflow: hidden;
			border-radius: 8px;
			border: 1px solid #e1e1e1;
			background: #fff;
		}
		.userIdImgUpload .userIdImgCont img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.userIdImgUpload .userIdImgCont .userIdImgUploadDesc{
			margin: 0px;
			line-height: 30px;
			font-size: 14px;
			color: #999999;
			font-weight: bold;
			text-align: center;
		}


		.userUploadDesc{
			width: 90%;
			font-size: 14px; 
			color: #999999;
			margin: 0 auto 20px;
		}
		
		.imageCover{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			display: none;
		}

	</style>
</head>
<body>
	<div class="content">
    
    <input id="timestamp" type="hidden" value="${timestamp}" />
	<input id="noncestr" type="hidden" value="${nonceStr}" />
	<input id="signature" type="hidden" value="${signature}" />
	<input id="appId" type="hidden" value="${appId}" />
	
	<div class="userCheckCont">
		<div class="userInfoCont">
			<div class="userInfoIcon">
				<img src="images/userInfoIcon.png" width="100%">
			</div>
			<div class="nickName">用户认证</div>
		</div>
	</div>
	
	<div class="solidCont">
		<div class="checkState">
			<div class="stateIcon">
				<img src="images/uncheckIcon.png" width="100%">
			</div>
			<div id="result" class="checkStateTxt">未认证</div>
			
			<!-- 按钮组 -->
			<div id="Authentication_entrance" class="checkBtn userRegBtn">新用户认证</div>
			<div id="Authentication_entrance_info" class="checkprompt">认证通过开启信息化校园快递</div>
		</div>

		<div class="infoCheckEditCont" id="newUserReg">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">姓名</div>
						<input onblur="checkName()" type="text" id="name" class="commonInput" name="name" placeholder="(必填)请输入你的姓名...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">密码</div>
						<input onblur="checkPassword()" type="password" id="password" class="commonInput" name="password" placeholder="(必填)请输入你的密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">确认</div>
						<input onblur="confirmPassword()" type="password" id="confirm_password" class="commonInput" name="confirm_password" placeholder="(必填)确认密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">身份证</div>
						<input onblur="checkNumber()" type="text" id="number" class="commonInput" name="number" placeholder="(必填)请输入你的身份证号码">
					</div>
					<!--<div class="inputTypeCont">
						<div class="inputTitle">手机</div>
						<input onblur="checkPhone()" type="text" id="phone" class="commonInput" name="phone" placeholder="(必填)请输入你的手机号码...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">验证码</div>
						<input type="text" id="msg" class="verifiInput" name="msg" placeholder="请输入验证码...">
						<input type="button" class="verifiBtn" value="发送验证码" onclick="sendMessage()">
					</div>-->
					
				</div>
			</form>
			<div id = "userRegSubmitBtn" class="submitBtn userRegSubmitBtn" onclick="submit()">确认提交</div>
			<div class="backBtn">点我返回</div>
		</div>
	</div>
	
	<div class="imageCover">
		<div class="coverCont">
			<img src="images/useridimage.jpg" width="100%">
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		var pageContextVal = $("#PageContext").val();
		var wxCodeVal = $("#wxCode").val();
		var windowW = $(window).width();
		var windowH = $(window).height();
		if (windowW > 600) {
			windowW = 600;
		}
		
		var topH = $(".userCheckCont").height();
		$(".solidCont").css({"height":(windowH - topH) + "px"});
		$(".infoCheckEditCont").css({"height":(windowH - topH - 30) + "px"});
		
		// cover
		var contentH = $(".content").height();
		$(".imageCover").css({"height":contentH + "px"});

		// 样例图片展示  501*377
		var imageH = windowW * 377 / 501; 
		$(".coverCont").css({"margin-top":(windowH - imageH)/2 + "px"});

		$(".imageCover").click(function(){
			$(".imageCover").fadeOut();
		});
		
		$(".solidCont").css({"margin-left":0+"px"});

		$(".userRegBtn").click(function(){
			$(".solidCont").animate({"margin-left":-windowW+"px"},"fast");
		});

		$(".backBtn").click(function(){
			$(".solidCont").animate({"margin-left":0+"px"},"fast");
		});
	});
</script>
<script>
	$(function () {
		//判断是否认证过
		$.getJSON("wx/userCheck.do",null,function (data) {
			if (data.status == 0){
				//已认证,把认证入口进行隐藏
				$("#result").html("恭喜！你已认证");
				$("#Authentication_entrance_info").hide();
				$("#Authentication_entrance").hide();
			}else {
				//未认证
				layer.msg("您还未认证，请及时验证！");
			}
		});
	});

	//表单验证
	function checkName(){
		var name = $("#name").val();
		//2-6位汉字
		if (name.match(/^[\u4e00-\u9fa5]{2,6}$/) == null){
			//不匹配
			layer.msg("请检查姓名格式");
			return false;
		}
		return true;
	}
	function checkPhone(){
		var phone = $("#phone").val();
		//13位手机号码
		if (phone.match(/^\d{11}$/) == null){
			//不匹配
			layer.msg("请检查手机号码格式");
			return false;
		}
		return true;
	}
	function checkPassword(){
		var password = $("#password").val();
		//5-12位密码
		if (password.match(/^[\s\S]{5,12}/) == null){
			//不匹配
			layer.msg("请检查密码格式");
			return false;
		}
		return true;
	}
	function confirmPassword() {
		var password = $("#password").val();
		var confirm_password = $("#confirm_password").val();
		if (confirm_password.match(/^[\s\S]{5,12}/) == null){
			//格式不匹配
			layer.msg("请检查第二次输入的密码格式");
			return false;
		}else if (password != confirm_password){
			//两次输入的密码不一样
			layer.msg("两次输入的密码不一致");
			return false
		}
		return true;
	}
	function checkCode(){
		var code = $("#msg").val();
		//验证码
		if (code.match(/^[0-9]{6}/) == null){
			//不匹配
			layer.msg("验证码格式有误");
			return false;
		}
		return true;
	}
	function checkNumber(){
		var number = $("#number").val();
		//身份证
		if (number.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ ) == null){
			//不匹配
			layer.msg("身份证格式有误");
			return false;
		}
		return true;
	}
	function checkSubmit(){
		return checkName() && checkPassword() && checkNumber() && confirmPassword();
	}

	//短信发送
	function sendMessage() {
		//手机号码格式正确则进行发送短信
		if (checkPhone()){
			//获取手机号
			var phone = $("#phone").val();
			//发送短信
			var windowId = layer.load();
			$.getJSON("/wx/authenticationSms.do",{authenticationPhone:phone},function (data) {
				//{status:,result:}
				layer.close(windowId);
				layer.msg(data.result);
			})
		}
	}
	//登录
	function submit() {
		if (checkSubmit()){	//信息输入无误
			var windowID = layer.load();
			//姓名
			var name = $("#name").val();
			//身份证号码
			var number = $("#number").val();
			//密码
			var password = $("#password").val();
			//$.getJSON("/wx/authenticationLogin.do",{userName:name,authenticationPhone:phone,password:password,code:code},function (data) {
			$.getJSON("/wx/authentication.do",{userName:name,password:password,number:number},function (data) {
				layer.close(windowID);
				layer.msg(data.result);
				if (data.status==0){
					//成功，进行跳转
					window.location.href = "index.html";
				}

			})
		}
	}
</script>
</body>
</html>